<template>
  <div>
    <div class="detailView">
      <div class="navihead">
        <img class="back" src="@/assets/back.png" @click="back()" alt="" />
        <span>{{ msgData.name }}</span>
        <div class="back" @click.stop="userList.showUserList=true">
          <img src="@/assets/img/userList.png" alt="" srcset="">
        </div>
      </div>
      <div class="msgView">
        <div
          :class="item.user_id != scoket.userData.user_id ? 'msgItem' : 'msgItem myMsgItem'"
          v-for="(item, index) in msgData.msgList"
          :key="index"
        >
          <img class="headICon" :src="item.headIcon" alt="" />
          <div class="message">{{ item.msg }}</div>
        </div>
      </div>
      
        <wjhInput @submit="submitMsg"></wjhInput>
      
      
    </div>

    <div class="userListView" v-if="userList.showUserList">
      <div class="navihead">
        <img class="back" src="@/assets/back.png" @click="back()" alt="" />
        <span>在线列表</span>
        <div class="back">
          
        </div>
      </div>
      <div class="userList" >
        <div class="userItem" v-for="(item,index) in data.userList" :key="index" @click.stop="gotoAlong(item)">
          <img class="headIcon" :src="item.headIcon" alt="" srcset=""  >
          <span class="userName">{{item.userName}}</span>
        </div>
        
      </div>
      
    </div>

  </div>
</template>
<script>
import { reactive, ref,getCurrentInstance, inject ,defineComponent, computed} from "vue";
import { useRouter } from "vue-router";
import wjhInput from "@/components/input.vue";
export default defineComponent({
  components: {
    wjhInput,
  },
  props:['data'],
  setup(props,content) {
    const scoket= inject('scoket')
    const addTalk = inject('addTalk')
    const {proxy} =getCurrentInstance()
    const msgData=computed(()=>props.data.list[props.data.select_index])
    const userList=reactive({
        showUserList:false
    })
    
    const submitMsg=(e)=>{
      if(props.data.list[props.data.select_index].scoketId=='all'){
        scoket.scoket.emit('all',msgType(e,'msg','all'))
      }else{
        scoket.scoket.emit('sendMsg',msgType(e,'msg',props.data.list[props.data.select_index].scoketId))
      }
      
    }
    const msgType=(msg,type,toId)=>{ 
      return {
        type:type?type:'msg',
        fromScoketId:scoket.scoket.id,
        user_id:scoket.userData.user_id,
        userName:scoket.userData.name,
        headIcon:scoket.userData.head_icon,
        msg:msg,
        toScoketId:toId?toId:'all',
        toName:'all',
        toHeadIcon:"" ,
        time:proxy.$time()
      }
    }
    const back=()=>{
      content.emit("close")
    }
    const gotoAlong=(item)=>{
      addTalk({
        name:item.userName,
        head_icon:item.headIcon,
        content:'',
        scoketId:item.fromScoketId,
        msgList:[]
      })
      content.emit("close")
    }
    return {msgData,scoket,userList,submitMsg,back,gotoAlong}
  },
})
</script>

<style lang="less" scoped>
.detailView {
  position: fixed;
  left: 0;
  top: 0;
  width: 750rem;
  height: 100vh;
  background: #fff;
  z-index: 10;
}
.talkItem {
  display: flex;
  padding: 30rem;
  border-bottom: 1px solid #f8f8f8;
  position: relative;
  color: #a5a5a5;
  .headIcon {
    width: 100rem;
    height: 100rem;
    margin-right: 20rem;
  }
  .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 70%;
    overflow: hidden;
    text-overflow: ellipsis;
    .name {
      font-size: 40rem;
      margin-bottom: 15rem;
      color: #000;
    }
    .text {
      font-size: 30rem;
    }
  }
  .time {
    font-size: 30rem;
    position: absolute;
    right: 30rem;
  }
}
.navihead {
  position: sticky;
  top: 0rem;
  background: #ffffff;
  box-sizing: border-box;
  width: 100%;
  height: 98rem;
  padding: 15rem 30rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .back {
    width: 36rem;
    height: 36rem;
  }
  span {
    font-size: 36rem;
    font-family: PingFang SC;
    font-weight: bold;
    color: #303133;
  }
}
.msgView {
  height: calc(100vh - 200rem);
  overflow: auto;

  .msgItem {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin: 30rem 0;
    font-size: 30rem;
    .headICon {
      width: 80rem;
      height: 80rem;
      border-radius: 50%;
      overflow: hidden;
      background: #fff;
      margin: 0rem 40rem;
    }
    .message {
      word-break: break-all;
      max-width: 500rem;
      background: #2f96ff;
      padding: 20rem;
      border-radius: 10rem;
    }
  }
  .myMsgItem {
    flex-direction: row-reverse;
    .message {
      background: #2fff65;
    }
  }
}
.back{
  img{
    width: 100%;
  }
}
.userListView{
  position: fixed;
  top: 0;
  left: 0;
  background: #fff;
  z-index: 10;
  height: 100vh;
  width: 100%;
}
.userList{
  margin: 30rem;
  width: 750rem;
  display: flex;
  flex-wrap: wrap;
  .userItem{
    
    margin: 30rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    img{
      
      width: 100rem;
      height: 100rem;
      margin-bottom: 20rem;
      border-radius: 20rem;
      overflow: hidden;

    }
    .userName{
      
      font-size: 30rem;
      font-weight: bold;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 100rem;
      text-align: center;

    }
  }
}
</style>